<template>
  <div class="wrap">
    <div class="header">
      <div class="logo">
        {{this.$store.getters.isLogin ? this.$store.state.user.title : ''}}
      </div>
      <ul class="nav">
        <li
        v-for="(item, index) of tabList"
        :key="index"
        >
          {{item.name}}
          <ul class="drop">
            <router-link
              :to="item.path[0]"
              tag="li"
            >
              {{index !== 1 ? '当日数据' : '当月数据'}}
            </router-link>
            <router-link
              :to="item.path[1]"
              tag="li"
            >
              对比数据
            </router-link>
          </ul>
        </li>
      </ul>
      <clock></clock>
      <button class="logout btn1" @click="logOut()"><i class="iconfont">&#xe637;</i>退出</button>
    </div>
    <div class="line"></div>
    <div class="bgLight"></div>
    <router-view></router-view>
  </div>
</template>

<script>
import Clock from './components/Clock'
import InteractionRouter from '@/common/interaction/Router'
import { mapGetters } from 'vuex'
export default {
  components: {
    Clock,
    InteractionRouter
  },
  computed: {
    tabList () {
      if (this.level !== '园级') {
        return [
          {
            name: '健康安全',
            path: [
              {
                path: '/healthy/today'
              },
              {
                path: '/healthy/contrast'
              }
            ]
          },
          {
            name: '身体发育',
            path: [
              {
                path: '/growth/today'
              },
              {
                path: '/growth/contrast'
              }
            ]
          },
          {
            name: '睡眠/体育活动',
            path: [
              {
                path: '/activity/today'
              },
              {
                path: '/activity/contrast'
              }
            ]
          }
        ]
      } else {
        return [
          {
            name: '健康安全',
            path: [
              {
                path: '/garden/healthy/today'
              },
              {
                path: '/garden/healthy/contrast'
              }
            ]
          },
          {
            name: '身体发育',
            path: [
              {
                path: '/garden/growth/today'
              },
              {
                path: '/garden/growth/contrast'
              }
            ]
          },
          {
            name: '睡眠/体育活动',
            path: [
              {
                path: '/garden/activity/today'
              },
              {
                path: '/garden/activity/contrast'
              }
            ]
          }
        ]
      }
    },
    ...mapGetters({
      level: 'areaLevel'
    })
  },
  mounted () {
    // 初始化地区
    this.$store.dispatch('fetchAreaIdList')
    this.$store.dispatch('fetchGardenIdList')
  },
  methods: {
    logOut () {
      this.$store.commit('logout')
      this.$router.push({name: 'Login'})
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  @keyframes halo {
    from {
      transform: scale(1)
    }
    to {
      transform: scale(0.4)
    }
  }
  .wrap
    overflow: hidden
    display: flex
    flex-direction: column
    background: url(../../../assets/images/bg_skin.jpg)
    height: 100%
    .header
      display: flex
      background: linear-gradient(to bottom, rgba(33, 90, 144, 1) 0%, rgba(33, 90, 144, 0) 100%)
      height: 75px
      box-shadow: 0 -1px 6px #2779c7 inset
      .logo
        flex: 1
        color: #fff
        font-size: 28px
        font-family: '方正正准黑简体常规'
        background: linear-gradient(to bottom, #fff 0%, #fff 40%, #a5b8ec 50%, #fff 60%, #fff 100%)
        -webkit-background-clip: text
        -webkit-text-fill-color: transparent
      .logo:before, .logo:after
        content: ''
        display:inline-block
        vertical-align: middle
        width: 80px
        height: 75px
        background: url(../../../assets/images/logo_l.png) center no-repeat
      .logo:after
        background-image: url(../../../assets/images/logo_r.png)
      .nav
        font-size: 14px
        li.router-link-active
          position: relative
          color: #45bde9
          text-shadow: 0 -2px 0 #000
        li.router-link-active:before
          position: absolute
          z-index: -1
          display: block
          content: ''
          left: 0
          bottom: -30px
          width: 120%
          height: 50px
          margin-left: -10%
          background: radial-gradient(rgba(48, 97, 156, 1), rgba(48, 97, 156, 0), rgba(48, 97, 156, 0))
          animation: halo 2s linear 0s infinite alternate
        li
          position: relative
          float: left
          margin-right: 30px
          border-left: 1px solid $BorderColor
          border-right: 1px solid $BorderColor
          width: 150px
          line-height: 37px
          text-align: center
          .drop
            position: absolute
            top: 100%
            left: -1px
            z-index: 99
            width: 150px
            border: solid $BorderColor
            border-width: 1px 1px 0 1px
            padding: 8px 0
            overflow: hidden
            li
              float: left
              width: 50%
              height: 20px
              line-height: 20px
              border: none
              font-size: 12px
              text-align: center
              margin: 0
              box-sizing: border-box
              border-right: 1px solid $BorderColor
              cursor: pointer
            :last-child
              border: none
      .logout
        margin: 20px 30px
        cursor: pointer
    .line
      height: 10px
    .bgLight
      position: fixed
      left: 0
      top: 50%
      margin: -500px 0 0 100px
      width: 800px
      height: 800px
      border-radius: 50%
      background: radial-gradient(rgba(108, 145, 211, .5), rgba(22, 45, 85, 0), rgba(22, 45, 85, 0))
</style>

<style>
/* 兼容性代码 */
.logo {
  background: none\0!important;
}
/* 屏幕适配代码 */
@media only screen and (min-width: 640px) {
  .logo {
    font-size: 16px!important;
  }
}
@media only screen and (min-width: 1300px) {
  .logo {
    font-size: 22px!important;
  }
}
@media only screen and (min-width: 1400px) {
  .logo {
    font-size: 28px!important;
  }
}
@media only screen and (min-width: 1920px) {
  .logo {
    font-size: 28px!important;
  }
}
</style>
